.div1 {
  color: #cccccc;
}
.div2 {
  color: #666666;
}
.div3 {
  color: #e5e5e5;
}
.div4 {
  color: #333333;
}
.div1 {
  color: #54bf8d;
}
.div2 {
  color: #118855;
}
.div1 {
  color: #ff7b10;
}
.div2 {
  color: #e64d00;
}
.div1 {
  color: #ff3333;
}
.div2 {
  color: #cc0000;
}
.div1 {
  color: #2e74d3;
}
.div2 {
  color: #0000b3;
}
div {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  -webkit-border-radius: 999px;
  -moz-border-radius: 999px;
}
.arrow {
  position: relative;
}
.arrow:after {
  content: "";
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  border: transparent 10px solid;
  border-bottom: #ff0000 10px solid;
  left: 0;
  bottom: 0;
}
div {
  position: relative;
}
div:after {
  content: "";
  display: block;
  position: absolute;
  width: 8px;
  height: 8px;
  right: 10px;
  top: 50%;
  margin-top: -4px;
  border-top: 2px solid #cccccc;
  border-right: 2px solid #cccccc;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  transform: rotate(135deg);
  -webkit-transform-origin: right center;
  -moz-transform-origin: right center;
  -ms-transform-origin: right center;
  transform-origin: right center;
}
